<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伸缩盒模型概念</title>
    <style>
        .box{
            width: 500px;
            height: 500px;
            border: #888888 1px solid;
            display: flex;
        }
        .box1{
            width: 1000px;
            height: 1000px;
            background-color: red;

        }
    </style>
</head>
<body>
<!--
    1.简介：
      2809年，W3G 提出了一种新的盒子模型--F1ex1b1e Box (伸缩盒慌型，又称:弹性盒子)。
      它可以轻松的控制:元素分布方式、元素对齐方式、元素视觉顺……
      截止曰前，除了在部分 工 浏览器不支持，其他浏览器均已全部支持。
      伸缩盒模型的出现，逐渐演变出了一套新的布局方案-- f1ex 布局。
    2.相比传递布局方式
      1.传统布局是指:基于传统盒状模型，主要靠: display属性 + posit1an属性 + float属性。
      2.flex 布局日前在移动端应用比较广泛，因为传统布同不能很好的呈现在移动设备上。
    3.伸缩容器:开启了 f1ex 的元素，就是:伸缩容器。
            1.给元素设置: display:f1ex 或 display:inline-flex，该元素就变为了伸缩容器。
            2.display:1n11ne-f1ex很少使用，因为可以给多个伸缩容器的父容器，也设置为伸缩容器。
            3、一个元素可以同时是:伸缩客器、伸缩项目。
    4.伸缩项目:伸缩容器所有子元素自动成为了:伸缩项目。
        1.仅伸缩容器的子元素成为了伸缩项日，孙子元素、重孙子元素等后代，不是伸缩项日。
        2.无论原来是哪种元素(块、行内块、行内)，一旦成为了仲缩项目，全都会“块状化”。
-->
        <div class="box">
            <div class="box1">1</div>
        </div>
</body>
</html>